<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>WinHolderService</title>
    <link rel="shortcut icon" href="../image/app_icon.png" type="image/png">
    <link rel="bookmark" href="../image/app_icon.png">
    <style>
      body {
        font-size: 1.125rem;
      }

      button {
        background-color: #71baf6;
        color: white;
        border-radius: 4px;
        border-width: 0;
        font-size: 1.125rem;
        height: 50px;
        padding: 0 15px;
        cursor: pointer;
        margin: 10px 0;
        width: 100%;
      }

      .inputClass {
        height: 50px;
        font-size: 1.125rem;
        text-align: center;
        width: 100%;
      }
    </style>
</head>
<body style="display:flex; justify-content: center">
<!---->
<div id="app" style="flex:1; max-width: 800px;">
    <div style="text-align: center">
        <span>WinHolderService</span>
    </div>

    <div style="display: flex; align-items: center; margin-top: 10px">
        <span style="margin: 0 10px;" v-text="tip"></span>
        <input class="inputClass"
               v-model="pwd"
               @keyup.enter="doLogin()"
               onfocus="this.select()"/>
    </div>
    <button @click="doLogin()">认证</button>
    <div style="color: red; text-align: center;" v-text="errMsg"></div>
</div>
<!---->
<script type="module">
  import "../common/plugins/vue/2.6.11.min.js"
  import axios from '../common/axios.js'
  import storageUtil from "../common/util/storageUtil.js";

  {
    new Vue({
      el: '#app',
      data() {
        return {
          tip: ':',
          pwd: '',
          errMsg: '',
        }
      },
      mounted() {
        storageUtil.removeStore('tk')
        axios.handlerErrMsg = err => this.errMsg = err
        axios.get('/sys/loginTip').then(resp => this.tip = resp.data + ':')
      },
      methods: {
        doLogin() {
          axios.post('/sys/login', {pwd: this.pwd}).then(resp => {
            storageUtil.setStore('tk', resp.data)
            window.location.href = './index.html'
          })
        }
      },
    })
  }
</script>
</body>
</html>